<template>
  <div class="order-confirm">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
      <defs>
        <symbol id="icon-add" viewBox="0 0 31 32">
          <title>add</title>
          <path d="M30.745 15.152h-14.382v-14.596c0-0.308-0.243-0.557-0.543-0.557s-0.543 0.249-0.543 0.557v14.596h-14.665c-0.3 0-0.543 0.249-0.543 0.557s0.243 0.557 0.543 0.557h14.665v15.177c0 0.307 0.243 0.557 0.543 0.557s0.543-0.249 0.543-0.557v-15.177h14.382c0.3 0 0.543-0.249 0.543-0.557s-0.243-0.557-0.543-0.557z" class="path1"></path>
        </symbol>
        <symbol id="icon-edit" viewBox="0 0 32 32">
          <title>edit</title>
          <path d="M28.287 8.51l-4.805-4.806 0.831-0.831c0.472-0.472 1.086-0.777 1.564-0.777 0.248 0 0.452 0.082 0.622 0.253l3.143 3.144c0.539 0.54 0.133 1.529-0.524 2.186l-0.831 0.831zM26.805 9.992l-1.138 1.138-4.805-4.806 1.138-1.138 4.805 4.806zM24.186 12.612l-14.758 14.762-4.805-4.806 14.758-14.762 4.805 4.806zM7.379 28.288l-4.892 1.224 1.223-4.894 3.669 3.67zM31.123 4.011l-3.143-3.144c-0.567-0.567-1.294-0.867-2.103-0.867-1.036 0-2.174 0.52-3.045 1.391l-20.429 20.436c-0.135 0.134-0.23 0.302-0.276 0.487l-2.095 8.385c-0.089 0.355 0.017 0.736 0.276 0.995 0.198 0.198 0.461 0.307 0.741 0.307 0.085 0 0.171-0.010 0.254-0.031l8.381-2.096c0.185-0.047 0.354-0.142 0.487-0.276l20.43-20.436c1.409-1.41 2.042-3.632 0.524-5.15v0z" class="path1"></path>
        </symbol>
        <symbol id="icon-del" viewBox="0 0 32 32">
          <title>delete</title>
          <path d="M11.355 4.129v-2.065h9.29v2.065h-9.29zM6.194 29.935v-23.742h19.613v23.742h-19.613zM30.968 4.129h-8.258v-3.097c0-0.569-0.463-1.032-1.032-1.032h-11.355c-0.569 0-1.032 0.463-1.032 1.032v3.097h-8.258c-0.569 0-1.032 0.463-1.032 1.032s0.463 1.032 1.032 1.032h3.097v24.774c0 0.569 0.463 1.032 1.032 1.032h21.677c0.569 0 1.032-0.463 1.032-1.032v-24.774h3.097c0.569 0 1.032-0.463 1.032-1.032s-0.463-1.032-1.032-1.032v0z" class="path1"></path>
          <path d="M10.323 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z" class="path2"></path>
          <path d="M16 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z" class="path3"></path>
          <path d="M21.677 9.806c-0.569 0-1.032 0.463-1.032 1.032v14.452c0 0.569 0.463 1.032 1.032 1.032s1.032-0.463 1.032-1.032v-14.452c0-0.569-0.463-1.032-1.032-1.032z" class="path4"></path>
        </symbol>
      </defs>
    </svg>
    <div class="wrapper">
      <div class="container">
        <div class="order-box">
          <div class="item-address">
            <h2 class="addr-title">收货地址</h2>
            <div class="addr-list clearfix">
              <div class="addr-info" :class="{'checked': CheckedIndex === index}" @click="CheckedIndex = index" v-for="(item,index) of Addresslist" :key="index">
                <h2>{{item.receiverName}}</h2>
                <div class="phone">{{item.receiverMobile}}</div>
                <div class="street">{{item.receiverProvince}} {{item.receiverCity}} {{item.receiverDistrict}} {{item.receiverAddress}}<br>东大街地铁
                </div>
                <div class="action">
                  <a href="javascript:;" class="fl" @click="handleDeleteAddress(item)">
                    <svg class="icon icon-del">
                      <use xlink:href="#icon-del"></use>
                    </svg>
                  </a>
                  <a href="javascript:;" class="fr" @click="handleEditeAddress(item)">
                    <svg class="icon icon-edit">
                      <use xlink:href="#icon-edit"></use>
                    </svg>
                  </a>
                </div>
              </div>
              <div class="addr-add">
                <div class="icon-add" @click="openAddressModal"></div>
                <!-- Form -->
                <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                  <el-form :model="form">
                    <el-form-item label="姓名:" label-width="120px">
                      <el-input v-model="form.receiverName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号:" label-width="120px">
                      <el-input v-model="form.receiverMobile" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-select v-model="form.receiverProvince" placeholder="请选择" class="selectOption" @change="ProvinceChange">
                      <el-option
                        v-for="item in ProvinceList"
                        :key="item.province_id"
                        :label="item.province_name"
                        :value="item.province_id"
                      >
                      </el-option>
                    </el-select>
                    <el-select v-model="form.receiverCity" placeholder="请选择" class="selectOption" @change="CityChange">
                      <el-option
                        v-for="item in CityList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-select v-model="form.receiverDistrict" placeholder="请选择">
                      <el-option
                        v-for="item in CountyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-form-item label="详细地址:" label-width="120px">
                      <el-input v-model="form.receiverAddress" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮政编码:" label-width="120px">
                      <el-input v-model="form.receiverZip" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handelConfirm('edit')">确 定</el-button>
                  </div>
                </el-dialog>
                <div>添加新地址</div>
              </div>
            </div>
          </div>
          <div class="item-good">
            <h2>商品</h2>
            <ul>
              <li v-for="item of list" :key="item.productId">
                <div class="good-name">
                  <img v-lazy="item.productMainImage" alt="">
                  <span>{{item.productSubtitle}}</span>
                </div>
                <div class="good-price">{{item.productPrice}} x {{item.quantity}}</div>
                <div class="good-total">{{item.productTotalPrice}}元</div>
              </li>
            </ul>
          </div>
          <div class="item-shipping">
            <h2>配送方式</h2>
            <span>包邮</span>
          </div>
          <div class="item-invoice">
            <h2>发票</h2>
            <a href="javascript:;">电子发票</a>
            <a href="javascript:;">个人</a>
          </div>
          <div class="detail">
            <div class="item">
              <span class="item-name">商品件数：</span>
              <span class="item-val">{{cartTotalQuantity}}</span>
            </div>
            <div class="item">
              <span class="item-name">商品总价：</span>
              <span class="item-val">{{cartTotalPrice}}元</span>
            </div>
            <div class="item">
              <span class="item-name">优惠活动：</span>
              <span class="item-val">0元</span>
            </div>
            <div class="item">
              <span class="item-name">运费：</span>
              <span class="item-val">0元</span>
            </div>
            <div class="item-total">
              <span class="item-name">应付总额：</span>
              <span class="item-val">{{cartTotalPrice}}</span>
            </div>
          </div>
          <div class="btn-group">
            <router-link to="/cart">
              <el-button class="backCart">返回购物车</el-button>
            </router-link>
            <el-button class="go_close_account" @click="orderSubmit">去结算</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCart,
  getAddressList,
  getProvince,
  getCity,
  getCounty,
  addAddress,
  deleteAddress,
  createOrder
} from "../api/home";

export default {
  name: 'order-confirm',
  data () {
    return {
      list: [],
      cartTotalPrice: '',
      cartTotalQuantity: '',
      Addresslist: [],
      form: {
        receiverName: '',
        receiverMobile: '',
        receiverProvince: '',
        receiverCity: '',
        receiverDistrict: '',
        receiverAddress: '',
        receiverZip: ''
      },
      dialogFormVisible: false,
      ProvinceList: [],
      CityList: [],
      CountyList: [],
      shippingId: '',
      CheckedIndex: ''
    }
  },
  methods: {
    // 打开新增地址弹框
    openAddressModal () {
      this.dialogFormVisible = true
      getProvince().then(res => {
        console.log(res)
        const data = res.data.data
        data.map(item => {
          item.label = item.province_name
          item.value = item.province_id
        })
        this.ProvinceList = data
      })
    },
    // 订单提交
    orderSubmit () {
      console.log(this.Addresslist)
      // 如果没有选择地址
      const item = this.Addresslist[this.CheckedIndex]
      if (!item) {
        this.$message.error('请选择地址')
        return
      }
      createOrder({
        shippingId: item.id
      }).then(res => {
        console.log(res)

        this.$router.push({
          path: '/order/pay',
          query: {
            orderNo: res.data.data.orderNo
          }
        })
      })
    },
    getCartInfo () {
      getCart().then(res => {
        const data = res.data.data
        const {cartProductVoList, cartTotalPrice, cartTotalQuantity} = data
        this.list = cartProductVoList
        this.cartTotalPrice = cartTotalPrice
        this.cartTotalQuantity = cartTotalQuantity
      })
    },
    getAddress () {
      getAddressList().then(res => {
        const data = res.data.data
        const {list} = data
        this.Addresslist = list
      })
    },
    ProvinceChange (id) {
      getCity({
        id
      }).then(res => {
        const data = res.data.data
        data.map(item => {
          item.value = item.city_id
          item.label = item.city_name
        })
        this.CityList = data
      })
    },
    CityChange (id) {
      getCounty({
        id
      }).then(res => {
        const data = res.data.data
        data.map(item => {
          item.value = item.county_id
          item.label = item.county_name
        })
        this.CountyList = data
      })
    },
    /**
     * 添加地址
     */
    handelConfirm () {
      addAddress({
        ...this.form
      }).then(res => {
        this.shippingId = res.data.data.shippingId
        console.log(this.form)
        this.getAddress();
      })
      this.dialogFormVisible = false
    },
    /**
     * 删除地址
     */
    handleDeleteAddress (item) {
      const id = item.id
      deleteAddress(id).then(res => {
        console.log(res)
        this.$message.success('删除地址成功')
        this.getAddress()
      })
    },
    /**
     * 编辑地址
     */
    handleEditeAddress (item) {
      console.log('编辑地址', item.id)
    }
  },
  mounted () {
    this.getCartInfo()
    this.getAddress()
  }
}
</script>
<style lang="scss">
.backCart {
  background-color: #ff6600;
  margin-right: 15px;
  color: #ffffff;
}

.go_close_account {
  background-color: #ff6600;
  color: #ffffff;
}

.selectOption {
  margin: 20px 10px;
}

.order-confirm {
  .wrapper {
    background-color: #f5f5f5;
    padding-top: 30px;
    padding-bottom: 84px;

    .order-box {
      background-color: #ffffff;
      padding-left: 40px;
      padding-bottom: 40px;

      .addr-title {
        font-size: 20px;
        color: #333333;
        font-weight: 200;
        margin-bottom: 21px;
      }

      .item-address {
        padding-top: 38px;

        .addr-list {
          .addr-info, .addr-add {
            box-sizing: border-box;
            float: left;
            width: 271px;
            height: 180px;
            border: 1px solid #e5e5e5;
            margin-right: 15px;
            padding: 15px 24px;
            font-size: 14px;
            color: #757575;
            margin-top: 10px;
          }

          .addr-info {
            cursor: pointer;

            h2 {
              height: 27px;
              font-size: 18px;
              font-weight: 300;
              color: #333333;
              margin-bottom: 10px;
            }

            .street {
              height: 50px;
            }

            .action {
              height: 50px;
              line-height: 50px;

              .icon {
                width: 20px;
                height: 20px;
                fill: #666666;
                vertical-align: middle;

                &:hover {
                  fill: #ff6700;
                }
              }
            }

            &.checked {
              border: 1px solid #ff6700;
            }
          }

          .addr-add {
            text-align: center;
            color: #999999;
            cursor: pointer;

            .icon-add {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              background: url('/imgs/icon-add.png') #e0e0e0 no-repeat center;
              background-size: 14px;
              margin: 0 auto;
              margin-top: 45px;
              margin-bottom: 10px;
            }
          }
        }
      }

      .item-good {
        margin-top: 34px;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 12px;

        h2 {
          border-bottom: 1px solid #e5e5e5;
          padding-bottom: 5px;
        }

        li {
          display: flex;
          align-items: center;
          height: 40px;
          line-height: 40px;
          margin-top: 10px;
          font-size: 16px;
          color: #333333;

          .good-name {
            flex: 5;

            img {
              width: 30px;
              height: 30px;
              vertical-align: middle;
            }
          }

          .good-price {
            flex: 2;
          }

          .good-total {
            padding-right: 44px;
            color: #ff6600;
          }
        }
      }

      .item-shipping, .item-invoice {
        margin-top: 31px;
        line-height: 20px;

        h2 {
          display: inline-block;
          margin-right: 71px;
          font-size: 20px;
          width: 80px;
        }

        span, a {
          font-size: 16px;
          color: #ff6700;
          margin-right: 23px;
        }
      }

      .detail {
        padding: 50px 44px 33px 0;
        border-bottom: 1px solid #f5f5f5;
        text-align: right;
        font-size: 16px;
        color: #666666;

        .item-val {
          color: #ff6700;
        }

        .item {
          line-height: 15px;
          margin-bottom: 12px;
        }

        .item-val {
          display: inline-block;
          width: 100px;
        }

        .item-total {
          .item-val {
            font-size: 28px;
          }
        }
      }

      .btn-group {
        margin-top: 37px;
        text-align: right;
      }
    }
  }

  .edit-wrap {
    font-size: 14px;

    .item {
      margin-bottom: 15px;

      .input {
        display: inline-block;
        width: 283px;
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        border: 1px solid #e5e5e5;

        & + .input {
          margin-left: 14px;
        }
      }

      select {
        height: 40px;
        line-height: 40px;
        border: 1px solid #e5e5e5;
        margin-right: 15px;
      }

      textarea {
        height: 62px;
        width: 100%;
        padding: 13px 15px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
      }
    }
  }
}
</style>
